<template>
	<view class="container">
		<!-- 头部导航栏 -->
		<view class="header">
			<view class="nav-back" @click="goBack">
				<uv-icon name="arrow-left" size='32'></uv-icon>
			</view>
			<text class="header-title">开通会员</text>
		</view>
		<!-- 会员特权 -->
		<view class="svip">
			<text class="section-title">———— 会员特权 ————</text>
			<view class="svip-icon">
				<view class="svip-icon-item">
					<image src="/static/images/my/svip-icon/svip-icon-1.png" mode=""></image>
					<text>离线阅读</text>
				</view>
				<view class="svip-icon-item">
					<image src="/static/images/my/svip-icon/svip-icon-2.png" mode=""></image>
					<text>免费阅读</text>
				</view>
				<view class="svip-icon-item">
					<image src="/static/images/my/svip-icon/svip-icon-1.png" mode=""></image>
					<text>离线阅读</text>
				</view>
				<view class="svip-icon-item">
					<image src="/static/images/my/svip-icon/svip-icon-2.png" mode=""></image>
					<text>免费阅读</text>
				</view>
			</view>
		</view>
		<!-- 套餐区域 -->
		<view class="recharge">
			<text class="section-title">———— 请选择套餐 ————</text>
			<view class="recharge-amount">
				<view class="recharge-amount-item">
					<text>￥6/月</text>
					<text>月卡</text>
				</view>
				<view class="recharge-amount-item">
					<text>￥30/3个月</text>
					<text>季卡</text>
				</view>
				<view class="recharge-amount-item">
					<text>￥50/12个月</text>
					<text>年卡</text>
				</view>
			</view>
		</view>
		<!-- 自动续费声明 -->
		<view class="tips">
			<text>自动续费声明:</text>
			<text>1.付款：自动续费商品包括“包月/包季/包年”;</text>
			<text>2.有问题请联系客服</text>
		</view>
		<!-- 购买按钮 -->
		<view class="rechargebtn">
			<text>立即购买</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		background-color: #f6f8fa;
	}

	/* 头部导航栏样式 */
	.header {
	  display: flex;
	  align-items: center;
	  padding: 24rpx 0; 
	  background: #fff;
	  position: relative; 
	
	  .nav-back {
	    width: 88rpx;
	    padding-left: 32rpx; 
	  }
	
	  .header-title {
	    position: absolute;
	    left: 50%;
	    transform: translateX(-50%);
	    font-size: 36rpx;
	    color: #333;
	    white-space: nowrap; 
	  }
	}

	// 会员特权
	.svip {
		width: 100%;
		height: 110px;
		background-color: #fff;

		.svip-icon {
			display: flex;
			justify-content: space-around;

			.svip-icon-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 35px;
					height: 35px;
				}
			}
		}
	}

	// 套餐区域
	.recharge {
		background-color: #fff;
		margin: 5px 0;
		padding-bottom: 10px;
	}

	.section-title {
		display: flex;
		justify-content: center;
		padding: 10px 0;
	}

	.recharge-amount {
		display: flex;
		flex-wrap: wrap;
		margin-left: 8px;

		.recharge-amount-item {
			width: 167px;
			height: 75px;
			border: 1px solid black;
			border-radius: 3px;
			margin: 5px;
			display: flex;
			justify-content: center;
			flex-direction: column;
			align-items: center;

			>text:nth-child(2) {
				color: red;
			}

		}
	}

	.tips {
		width: 100%;
		height: 276px;
		background-color: #fff;
		padding: 10px;
		display: flex;
		flex-direction: column;

		>text:first-child {
			color: #333;
		}

		text {
			margin: 5px;
			color: #aaa;
		}
	}

	.rechargebtn {
		width: 100%;
		height: 44px;
		background-color: #f59a23;
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		bottom: 0;

		text {
			color: #fff;
		}
	}
</style>